<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务详情 - 悬赏任务平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #4361ee;
            --secondary: #3f37c9;
            --success: #4cc9f0;
            --warning: #f72585;
            --light: #f8f9fa;
            --dark: #212529;
            --gray: #6c757d;
            --light-gray: #e9ecef;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: #f0f2f5;
            color: var(--dark);
            line-height: 1.6;
            padding-bottom: 80px;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 0 15px;
        }
        
        /* 头部样式 */
        header {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            padding: 15px 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .header-content {
            display: flex;
            align-items: center;
            padding: 0 15px;
        }
        
        .back-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-size: 20px;
            cursor: pointer;
        }
        
        .header-title {
            font-size: 20px;
            font-weight: bold;
            flex: 1;
        }
        
        .action-icon {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            cursor: pointer;
        }
        
        /* 任务详情卡片 */
        .task-card {
            background: white;
            border-radius: 15px;
            padding: 25px;
            margin: 20px 0;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }
        
        .task-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 20px;
        }
        
        .task-title {
            font-size: 24px;
            font-weight: bold;
            color: var(--dark);
            max-width: 80%;
        }
        
        .task-price {
            background: linear-gradient(135deg, var(--warning), #ff0a78);
            color: white;
            padding: 8px 20px;
            border-radius: 30px;
            font-weight: bold;
            font-size: 20px;
            min-width: 120px;
            text-align: center;
        }
        
        .task-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .meta-item {
            display: flex;
            align-items: center;
            font-size: 16px;
        }
        
        .meta-item i {
            margin-right: 8px;
            color: var(--primary);
        }
        
        .task-category {
            background: rgba(67, 97, 238, 0.1);
            color: var(--primary);
            padding: 5px 15px;
            border-radius: 20px;
            font-weight: 500;
        }
        
        /* 任务详情部分 */
        .section-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }
        
        .section-title i {
            margin-right: 10px;
            color: var(--primary);
        }
        
        .task-description {
            margin-bottom: 30px;
            line-height: 1.8;
        }
        
        /* 阶段详情 */
        .stages-container {
            margin-bottom: 30px;
        }
        
        .stage-card {
            background: var(--light);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 15px;
            position: relative;
            border-left: 4px solid var(--primary);
        }
        
        .stage-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }
        
        .stage-name {
            font-size: 18px;
            font-weight: 600;
        }
        
        .stage-price {
            color: var(--warning);
            font-weight: bold;
            font-size: 18px;
        }
        
        .stage-details {
            padding-left: 10px;
        }
        
        .stage-details li {
            margin-bottom: 8px;
            position: relative;
            padding-left: 20px;
        }
        
        .stage-details li:before {
            content: "•";
            position: absolute;
            left: 0;
            color: var(--primary);
            font-size: 20px;
            line-height: 1;
        }
        
        /* 发布者信息 */
        .publisher-card {
            background: white;
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            border: 1px solid var(--light-gray);
        }
        
        .publisher-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .publisher-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: var(--light-gray);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-weight: bold;
            font-size: 24px;
            color: var(--primary);
        }
        
        .publisher-info {
            flex: 1;
        }
        
        .publisher-name {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .publisher-meta {
            display: flex;
            gap: 15px;
            color: var(--gray);
            font-size: 14px;
        }
        
        .publisher-rating {
            display: flex;
            align-items: center;
            color: #ffc107;
        }
        
        .publisher-rating i {
            margin-right: 3px;
        }
        
        .publisher-stats {
            display: flex;
            justify-content: space-around;
            text-align: center;
            padding: 15px 0;
            border-top: 1px solid var(--light-gray);
            border-bottom: 1px solid var(--light-gray);
            margin: 15px 0;
        }
        
        .stat-item {
            flex: 1;
        }
        
        .stat-value {
            font-size: 20px;
            font-weight: bold;
            color: var(--primary);
        }
        
        .stat-label {
            font-size: 14px;
            color: var(--gray);
        }
        
        /* 领取按钮区域 */
        .action-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: white;
            padding: 15px;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .action-info {
            flex: 1;
            padding-right: 15px;
        }
        
        .action-info .total-price {
            font-size: 20px;
            font-weight: bold;
            color: var(--warning);
        }
        
        .action-info .hint {
            font-size: 14px;
            color: var(--gray);
        }
        
        .claim-btn {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            border: none;
            padding: 14px 30px;
            border-radius: 50px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            min-width: 180px;
            box-shadow: 0 4px 12px rgba(67, 97, 238, 0.4);
            transition: transform 0.3s;
        }
        
        .claim-btn:hover {
            transform: translateY(-3px);
        }
        
        /* 要求部分 */
        .requirements {
            margin-bottom: 30px;
        }
        
        .requirement-list {
            background: var(--light);
            border-radius: 12px;
            padding: 20px;
        }
        
        .requirement-item {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .requirement-item:last-child {
            margin-bottom: 0;
        }
        
        .requirement-icon {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--primary);
            color: white;
            border-radius: 50%;
            margin-right: 12px;
            font-size: 12px;
        }
        
        .requirement-text {
            font-size: 16px;
        }
        
        .requirement-status {
            margin-left: auto;
            font-size: 14px;
            padding: 3px 10px;
            border-radius: 15px;
        }
        
        .status-met {
            background: #d4edda;
            color: #155724;
        }
        
        .status-not-met {
            background: #f8d7da;
            color: #721c24;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .task-header {
                flex-direction: column;
                gap: 15px;
            }
            
            .task-title {
                max-width: 100%;
            }
            
            .publisher-header {
                flex-direction: column;
                text-align: center;
            }
            
            .publisher-avatar {
                margin-right: 0;
                margin-bottom: 15px;
            }
            
            .publisher-meta {
                justify-content: center;
            }
            
            .action-bar {
                flex-direction: column;
                gap: 10px;
            }
            
            .action-info {
                text-align: center;
                padding-right: 0;
                margin-bottom: 10px;
            }
            
            .claim-btn {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <!-- 头部区域 -->
    <header>
        <div class="header-content">
            <div class="back-btn">
                <i class="fas fa-arrow-left"></i>
            </div>
            <div class="header-title">任务详情</div>
            <div class="action-icon">
                <i class="fas fa-share-alt"></i>
            </div>
            <div class="action-icon">
                <i class="fas fa-ellipsis-v"></i>
            </div>
        </div>
    </header>
    
    <div class="container">
        <!-- 任务详情卡片 -->
        <div class="task-card">
            <div class="task-header">
                <div class="task-title">企业官网UI设计（三阶段）</div>
                <div class="task-price">¥1,850</div>
            </div>
            
            <div class="task-meta">
                <div class="meta-item">
                    <i class="fas fa-clock"></i>
                    <span>截止：2025-07-20</span>
                </div>
                <div class="meta-item">
                    <i class="fas fa-map-marker-alt"></i>
                    <span>远程任务</span>
                </div>
                <div class="meta-item">
                    <i class="fas fa-layer-group"></i>
                    <span class="task-category">设计类</span>
                </div>
                <div class="meta-item">
                    <i class="fas fa-user-check"></i>
                    <span>需实名认证</span>
                </div>
            </div>
            
            <!-- 任务描述 -->
            <div class="section-title">
                <i class="fas fa-file-alt"></i>
                <span>任务描述</span>
            </div>
            <div class="task-description">
                <p>我们需要为一家科技公司设计全新的企业官网，要求采用现代化设计风格，符合科技公司的专业形象。网站需要包含首页、产品介绍、解决方案、关于我们和联系我们等核心页面。</p>
                <p><strong>设计要求：</strong></p>
                <ul>
                    <li>响应式设计，适配PC、平板和手机</li>
                    <li>使用蓝色为主色调，体现科技感</li>
                    <li>设计风格简洁大气，避免过于花哨</li>
                    <li>提供完整的页面设计源文件（Sketch或Figma）</li>
                    <li>提供设计规范文档</li>
                </ul>
                <p><strong>交付标准：</strong></p>
                <p>设计稿需包含所有页面的高保真原型，标注清晰，设计规范完整。</p>
            </div>
            
            <!-- 任务阶段 -->
            <div class="section-title">
                <i class="fas fa-tasks"></i>
                <span>任务阶段</span>
            </div>
            <div class="stages-container">
                <div class="stage-card">
                    <div class="stage-header">
                        <div class="stage-name">阶段一：需求分析与原型设计</div>
                        <div class="stage-price">¥600</div>
                    </div>
                    <div class="stage-details">
                        <ul>
                            <li>与产品经理沟通需求，理解业务目标</li>
                            <li>制作网站信息架构图</li>
                            <li>设计低保真线框图</li>
                            <li>设计高保真交互原型</li>
                            <li>交付物：原型设计文件（PDF格式）</li>
                        </ul>
                    </div>
                </div>
                
                <div class="stage-card">
                    <div class="stage-header">
                        <div class="stage-name">阶段二：UI视觉设计</div>
                        <div class="stage-price">¥850</div>
                    </div>
                    <div class="stage-details">
                        <ul>
                            <li>设计首页视觉稿</li>
                            <li>设计内页视觉稿（产品、解决方案等）</li>
                            <li>设计移动端适配方案</li>
                            <li>创建设计规范文档</li>
                            <li>交付物：所有页面设计源文件（Sketch/Figma）</li>
                        </ul>
                    </div>
                </div>
                
                <div class="stage-card">
                    <div class="stage-header">
                        <div class="stage-name">阶段三：交付与修改</div>
                        <div class="stage-price">¥400</div>
                    </div>
                    <div class="stage-details">
                        <ul>
                            <li>根据反馈进行设计调整（不超过3次修改）</li>
                            <li>提供切图资源包</li>
                            <li>与开发团队交接设计细节</li>
                            <li>最终交付所有设计文件</li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <!-- 执行者要求 -->
            <div class="section-title">
                <i class="fas fa-user-check"></i>
                <span>执行者要求</span>
            </div>
            <div class="requirements">
                <div class="requirement-list">
                    <div class="requirement-item">
                        <div class="requirement-icon">
                            <i class="fas fa-check"></i>
                        </div>
                        <div class="requirement-text">必须通过平台实名认证</div>
                        <div class="requirement-status status-met">已满足</div>
                    </div>
                    
                    <div class="requirement-item">
                        <div class="requirement-icon">
                            <i class="fas fa-check"></i>
                        </div>
                        <div class="requirement-text">需提供3个以上UI设计案例</div>
                        <div class="requirement-status status-met">已满足</div>
                    </div>
                    
                    <div class="requirement-item">
                        <div class="requirement-icon">
                            <i class="fas fa-check"></i>
                        </div>
                        <div class="requirement-text">需具备企业官网设计经验</div>
                        <div class="requirement-status status-not-met">未满足</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 发布者信息 -->
        <div class="section-title">
            <i class="fas fa-user-tie"></i>
            <span>任务发布方</span>
        </div>
        <div class="publisher-card">
            <div class="publisher-header">
                <div class="publisher-avatar">科</div>
                <div class="publisher-info">
                    <div class="publisher-name">科技创新有限公司</div>
                    <div class="publisher-meta">
                        <div class="publisher-rating">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star-half-alt"></i>
                            <span>(4.7)</span>
                        </div>
                        <div class="publisher-verified">
                            <i class="fas fa-badge-check"></i> 企业认证
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="publisher-stats">
                <div class="stat-item">
                    <div class="stat-value">87%</div>
                    <div class="stat-label">好评率</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">42</div>
                    <div class="stat-label">已发布任务</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">98%</div>
                    <div class="stat-label">完成率</div>
                </div>
            </div>
            
            <div class="contact-actions">
                <button style="width:100%; padding:12px; background:var(--light); border:1px solid var(--light-gray); border-radius:10px; font-weight:500; cursor:pointer;">
                    <i class="fas fa-comment-dots"></i> 联系发布方
                </button>
            </div>
        </div>
        
        <!-- 平台提示 -->
        <div class="task-card" style="background: #e6f7ff; border-left: 4px solid #1890ff;">
            <h3><i class="fas fa-info-circle" style="color: #1890ff;"></i> 平台提示</h3>
            <p style="margin-top: 15px; line-height: 1.6;">
                1. 任务资金已全额托管在平台，安全有保障<br>
                2. 任务完成后，资金将按阶段划拨到您的账户<br>
                3. 平台服务费：普通会员15%，SVIP会员8%<br>
                4. 如有纠纷可申请平台仲裁，保障双方权益
            </p>
        </div>
    </div>
    
    <!-- 底部操作栏 -->
    <div class="action-bar">
        <div class="action-info">
            <div>任务总金额：<span class="total-price">¥1,850</span></div>
            <div class="hint">任务资金已由发布方托管在平台</div>
        </div>
        <button class="claim-btn">领取任务</button>
    </div>
    
    <script>
        // 返回按钮
        document.querySelector('.back-btn').addEventListener('click', function() {
            history.back();
        });
        
        // 领取任务按钮
        document.querySelector('.claim-btn').addEventListener('click', function() {
            // 检查是否满足所有要求
            const unmetRequirements = document.querySelectorAll('.status-not-met');
            if (unmetRequirements.length > 0) {
                alert('您尚未满足所有任务要求，请完善资料后再申请');
                return;
            }
            
            // 确认领取
            const taskTitle = document.querySelector('.task-title').textContent;
            const taskPrice = document.querySelector('.task-price').textContent;
            
            if (confirm(`确定要领取任务：${taskTitle} 吗？\n任务资金 ${taskPrice} 将被冻结，开始执行后按阶段结算`)) {
                // 模拟领取过程
                this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 处理中...';
                this.disabled = true;
                
                setTimeout(() => {
                    this.innerHTML = '<i class="fas fa-check-circle"></i> 已领取';
                    this.style.background = '#28a745';
                    
                    // 显示成功消息
                    alert('任务领取成功！\n资金已冻结，请尽快联系发布方开始执行第一阶段工作');
                    
                    // 添加继续操作按钮
                    const continueBtn = document.createElement('button');
                    continueBtn.textContent = '查看任务进度';
                    continueBtn.style.background = '#17a2b8';
                    continueBtn.style.color = 'white';
                    continueBtn.style.border = 'none';
                    continueBtn.style.padding = '12px 20px';
                    continueBtn.style.borderRadius = '8px';
                    continueBtn.style.fontWeight = 'bold';
                    continueBtn.style.cursor = 'pointer';
                    continueBtn.style.marginTop = '10px';
                    continueBtn.style.width = '100%';
                    
                    continueBtn.addEventListener('click', function() {
                        alert('跳转到任务管理页面');
                    });
                    
                    this.parentElement.appendChild(continueBtn);
                }, 1500);
            }
        });
        
        // 分享按钮
        document.querySelector('.fa-share-alt').closest('.action-icon').addEventListener('click', function() {
            alert('分享任务功能\n生成分享链接或二维码');
        });
        
        // 更多选项
        document.querySelector('.fa-ellipsis-v').closest('.action-icon').addEventListener('click', function() {
            alert('显示更多选项：\n- 举报任务\n- 收藏任务\n- 查看任务规则');
        });
    </script>
</body>
</html>